<template>
  <div class="tables">
    <table-ope :tableData="tableData" :tableHeader="tableHeader" :size="size"></table-ope>
  </div>
</template>

<script>
import TableOpe from './table-ope'
export default {
  name: 'tables',
  components: {
    TableOpe
  },
  data() {
    return {
      tableHeader: [],
      tableData: [],
      tableDataFake: {}
    }
  },
  props: {
    tableOptions: {
      type: Array,
      default: () => []
    },
    size:{
      type:String,
      default:'small'
    }
  },
  created() {
    this.tableHeader = this.tableOptions[0]
    this.operateTableContent()
  },
  methods: {
    operateTableContent() {
      try {
        this.tableOptions.forEach((options, index) => {
          this.fixData(options, index, false)
        })
      } finally {
        this.operateData()
      }
    },
    fixData(tableOptions, index, isDiGui = false) {
      if (!this.tableDataFake[index] && isDiGui === false) {
        this.tableDataFake[index] = []
      }
      tableOptions.forEach(resp => {
        if (resp.children && resp.children.length > 0) {
          this.fixData(resp.children, index, true)
        } else {
          this.tableDataFake[index].push(resp)
        }
      })
    },
    operateData() {
      Object.values(this.tableDataFake).forEach(responce => {
        let temporyObj = {}
        responce.forEach(resp => {
          temporyObj[resp.prop] = resp.value
        })
        this.tableData.push(temporyObj)
      })
    }
  }
}
</script>

<style scoped>
  .tables{
    width: 100%;
    height: 100%;
  }
</style>
